<!--**
  *@info 搜索组件
  *@author: thinkmix
* *-->
<template>
  <header class="bgGrey m-header-col f-flex mid">
    <div v-if="showCity" @click="cityHandle" class="location f-flex mid center">
      <span class="u-icon-location"></span>
      <span>{{ cityName }}</span>
    </div>
    <div class="search">
      <input
        v-model="value_"
        class="u-icon-search"
        type="tel"
        :maxlength="maxlength"
        :placeholder="placeholder"
      />
      <span v-show="value_.length" @click="clearHandle" class="u-icon-clear"></span>
    </div>
    <div
      class="more btnScale f-flex mid center"
      :class="{active:searchBtnActive}"
      @click="searchHandle"
    >
      <span>{{ searchBtnText }}</span>
    </div>
  </header>
</template>
<script>
import { regularValid } from '@/utils/utils';

export default {
  name: 'loading',
  props: {
    // 是否显示城市
    showCity: {
      default: true,
      type: Boolean
    },
    value: {
      default: '',
      type: String
    },
    cityName: {
      default: '',
      type: String
    },
    placeholder: {
      default: '请输入至少3位数字',
      type: String
    },
    // 是否存在选择高级搜索
    isCondition: {
      default: true,
      type: Boolean
    },
    maxlength: {
      default: 11,
      type: Number
    },
  },
  data () {
    return {
      value_: '',
      isSelectRule: false, // 是否是选择了高级搜索
      selectCity: { // 选择的城市
        name: '全国',
        cityCode: '100',
        proviceCode: ''
      }
    }
  },
  computed: {
    searchBtnText () {
      if (this.isCondition) {
        if (this.value_.length > 2) {
          return '尾号搜索'
        } else {
          return '高级搜索'
        }
      } else {
        return '搜索'
      }
    },
    searchBtnActive () {
      return this.value_.length < 3 && this.isSelectRule
    }
  },
  watch: {
    'value' () {
      this.value_ = this.value;
    },
    'value_' () {
      this.$emit('input', this.value_);
    }
  },
  created () {
    this.isSelectRule = !!this.getUrlParam('selectRule');
  },
  methods: {
    searchHandle () {
      let valueLen = this.value.length;

      if (
        (
          (this.isCondition && valueLen > 2) ||
          !this.isCondition
        ) &&
        !regularValid('int+', this.value)
      ) {
        this.errorBubble('请输入数字');
        return false;
      }

      this.removeStore('SELECT_RULE');
      this.isSelectRule = false;

      this.$emit('on-search')
    },
    cityHandle () {
      this.$emit('on-city')
    },
    clearHandle () {
      this.value_ = '';
    }
  }
}
</script>

<style lang="scss" scoped>
.m-header-col {
  padding: 8px;
  background-color: #ebecee;
  font-size: 0.13rem;
}
.m-header-col > div {
  background-color: #fff;
  border-radius: 5px;
  height: 0.35rem;
}
.m-header-col > .location {
  flex: 2;
  text-align: center;
  color: #ecac17;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 0.1rem;
}
.m-header-col > .location > .u-icon-location {
  width: 0.15rem;
  height: 0.15rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(~@/assets/img/number/icon_location.png);
  margin-right: 2px;
}
.m-header-col > .search {
  position: relative;
  flex: 6;
  margin-right: 0.1rem;
}
.m-header-col > .search > input {
  width: 100%;
  display: block;
  border-radius: 5px;
  padding-left: 0.25rem;
  border: none;
  font-size: 0.14rem;
  height: 0.35rem;
  line-height: normal;
  background-size: 0.2rem;
  background-position: 4px center;
  background-repeat: no-repeat;
}
.m-header-col > .search > input::-webkit-input-placeholder {
  line-height: 1.5em;
}
.m-header-col > .search > input:-moz-placeholder {
  line-height: 1.5em;
}
.m-header-col > .search > input::-moz-placeholder {
  line-height: 1.5em;
}
.m-header-col > .search > input:-ms-input-placeholder {
  line-height: 1.5em;
}
.m-header-col > .search > .u-icon-clear {
  position: absolute;
  right: 0;
  width: 0.35rem;
  height: 0.35rem;
  top: 0;
  background-size: 0.2rem;
  background-position: center;
  background-repeat: no-repeat;
}
.m-header-col > .more {
  flex: 2;
  transition: all 0.05s ease-out;
}
.m-header-col > .more.active {
  color: #ed3a26 !important;
}
</style>
